<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery_plugin</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 100px;
				height: 100px;
				margin:50px;
				
			}
		</style>
		<script type="text/javascript" src="jquery-3.4.1.js"></script>
	</head>
	<body>
		<div></div>
		<div></div>
		<script>
			/* 
			jQuery_plugin(自定义插件) :
			jQuery定义插件的四点需要注意的:
			   1,jQuery的插件是定义在jQuery.fn(原型)的基础上 -->$.fn.extend({})
			   2,命名冲突的解决 -->(function(){})() -->立即执行函数
			   3,循环jQuery对象中的每个元素 -->(this.each())
			   4,在函数中，将jQuery对象返回 -->(return this)
			*/
			/* (function(){})() -->立即执行函数*/
			
			(function($) { //避免命名冲突
			
				$.fn.extend({
					randomColor: function() {
						
						function random() {
							var r = Math.floor(Math.random() * 256);
							var g = Math.floor(Math.random() * 256);
							var b = Math.floor(Math.random() * 256);
							
							return "rgb("+r+","+g+","+b+")";
						}
						
						this.each(function(index) {//此时的this 已经改变为具体的一个子元素
                            $(this).css({
								backgroundColor:random()
							})
						})
						
						return this; //this指向的是$选择器选取到的所有元素组成的伪数组
					}
				})
				
			})(jQuery);

			$("div").randomColor();//随机色
		</script>
	</body>
</html>
